<!DOCTYPE html>
<html lang="zh-cn">
<!-- 测试宽度单位 -->

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>H5跳转小程序</title>

    <!-- 注意低版本的不行，低版本的微信客户端也不行 -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>

<body>
    <wx-open-launch-weapp id="launch-btn" username="gh_885f8992f3e2">
        <template>
            <style>
                .btn {
                    padding: 12px
                }
            </style>
            <button class="btn">打开小程序</button>
        </template>
    </wx-open-launch-weapp>
</body>

</html>
<script>
    wx.config({
        debug: true,
        appId: 'wx2f3c0a4ff678a639',    //appId不要搞错了
        timestamp: 1607321104,  //微信会校验这个时间，太久以前的时间不行，所以应该每次生成
        nonceStr: 'test',
        signature: 'c04f5953eefd28cf80ceea592ab5e5e1f041e9e6',
        jsApiList: ['checkJsApi'],  //至少得指定一个
        openTagList: ['wx-open-launch-weapp'],
    });

    wx.ready(function () {

        var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch', function (e) {
            console.log('success');
        });
        btn.addEventListener('error', function (e) {
            console.log('fail', e.detail);
        });
    });
</script>